<template>
  <view class="scrollAllWrap">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallbcak"
      :up="upOption"
      @up="upCallback"
      top="10px"
    >
      <view v-for="(item, index) in orderList" :key="index" @click="jumpToorderDeatil(item)">
        <order-card :orderInfo="item" />
      </view>
    </mescroll-uni>

    <!--底部-->
    <view class="bottom">
      <view class="bottom_text" @click="show = true">
        <u-icon name="search"></u-icon>
        <text class="search">搜索</text>
      </view>
      <view class="sub">总条目: {{ total }} 条</view>
    </view>
    <!--搜索弹框-->
    <u-popup class="search-popup" v-model="show" width="80%">
      <view class="input">
        <text>车牌号</text>
        <input
          class="uni-input"
          type="text"
          @input="onCarNumChange"
          :value="queryForm.carNum"
          placeholder="请输入车牌号"
          maxlength="8"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>订单号</text>
        <input
          class="uni-input"
          type="text"
          @input="onOrderNumChange"
          :value="queryForm.orderNum"
          placeholder="请输入订单号号"
          maxlength="32"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>订单类型</text>
        <picker
          mode="selector"
          @change="onOrderTypeChange"
          :range-key="rangeKey"
          :value="queryForm.orderType"
          :range="orderTypeList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(orderTypeList, queryForm.orderType) || '请选择订单类型'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>订单状态</text>
        <picker
          mode="selector"
          @change="onOrderStateChange"
          :range-key="rangeKey"
          :value="queryForm.orderState"
          :range="orderStateList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(orderStateList, queryForm.orderState) || '请选择订单状态'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" @click="beginTimePicker = true">
        <text>创建开始时间</text>
        <u-picker
          v-model="beginTimePicker"
          mode="time"
          :params="params"
          @confirm="onBeginTimeChange"
        ></u-picker>
        <view v-if="queryForm.gmtStartTime" class="uni-input">{{ queryForm.gmtStartTime }}</view>
        <view class="uni-input-picker" v-else>请选择创建开始时间</view>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" @click="endTimePicker = true">
        <text>创建结束时间</text>
        <u-picker
          v-model="endTimePicker"
          mode="time"
          :params="params"
          @confirm="onEndTimeChange"
        ></u-picker>
        <view v-if="queryForm.gmtEndTime" class="uni-input">{{ queryForm.gmtEndTime }}</view>
        <view class="uni-input-picker" v-else>请选择创建结束时间</view>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" @click="finishBeginTimePicker = true">
        <text>完成开始时间</text>
        <u-picker
          v-model="finishBeginTimePicker"
          mode="time"
          :params="params"
          @confirm="onFinishBeginTimeChange"
        ></u-picker>
        <view v-if="queryForm.finishStartTime" class="uni-input">{{ queryForm.finishStartTime }}</view>
        <view class="uni-input-picker" v-else>请选择完成开始时间</view>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" @click="finishEndTimePicker = true">
        <text>完成结束时间</text>
        <u-picker
          v-model="finishEndTimePicker"
          mode="time"
          :params="params"
          @confirm="onFinishEndTimeChange"
        ></u-picker>
        <view v-if="queryForm.finishEndTime" class="uni-input">{{ queryForm.finishEndTime }}</view>
        <view class="uni-input-picker" v-else>请选择完成结束时间</view>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="search-warp">
        <view class="search-warp-btn  left" @click="search">
          <u-icon name="search"></u-icon>
          <text class="search">搜索</text>
        </view>

        <view class="search-warp-btn right" @click="reset">
          <u-icon name="reload"></u-icon>
          <text class="search">重置</text>
        </view>
      </view>

      <view class="close-btn" @click="show = false">关闭</view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import OrderCard from './OrderCard';
import { mapGetters } from 'vuex';
export default {
  components: {
    OrderCard,
  },

  mixins: [MescrollMixin],
  onLoad(optData) {
    this.agentId = optData.agentId || '';
    this.partnerId = optData.partnerId || '';
    this.memberId = optData.memberId || '';
    this.driverId = optData.driverId || '';
    this.stationId = optData.stationId || '';
  },
  data() {
    return {
      agentId: '',
      partnerId: '',
      memberId: '',
      driverId: '',
      stationId: '',
      rangeKey: 'dictLabel',
      show: false,
      beginTimePicker: false,
      endTimePicker: false,
      finishEndTimePicker: false,
      finishBeginTimePicker: false,
      orderList: [],
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        orderNum: '',
        carNum: '',
        orderType: '',
        orderState: '',
        gmtStartTime: '',
        gmtEndTime: '',
        finishStartTime: '',
        finishEndTime: '',
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      orderTypeList: [],
      orderStateList: [],
      downOption: {
        auto: false, // 是否在初始化后，自动执行downCallback
        autoShowLoading: true, // 显示下拉刷新的进度条
        textColor: '#fff', // 下拉刷新文本颜色
      },
      upOption: {
        auto: false,
        textNoMore: '-- END --',
        empty: {
          use: true,
          tip: '暂无信息',
        },
      },
    };
  },
  onShow() {
    this.downCallbcak();
  },
  created() {
    this.fetchOrderType();
    this.fetchOrderState();
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 订单详情
    jumpToorderDeatil(order) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/order/order-detail?order=${JSON.stringify(order)}`,
      });
    },

    fetchOrderType() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'order_type',
        })
        .then(res => {
          if (res.code === 200) {
            this.orderTypeList = res.data;
          }
        });
    },
    fetchOrderState() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'order_state',
        })
        .then(res => {
          if (res.code === 200) {
            this.orderStateList = res.data;
          }
        });
    },
    onCarNumChange(e) {
      this.queryForm.carNum = e.target.value && e.target.value;
    },
    onOrderNumChange(e) {
      this.queryForm.orderNum = e.target.value && e.target.value;
    },
    onOrderTypeChange(e) {
      this.queryForm.orderType = this.orderTypeList[e.target.value].dictValue;
    },
    onOrderStateChange(e) {
      this.queryForm.orderState = this.orderStateList[e.target.value].dictValue;
    },
    onBeginTimeChange: function(e) {
      this.queryForm.gmtStartTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    onFinishBeginTimeChange: function(e) {
      this.queryForm.finishStartTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    onEndTimeChange: function(e) {
      this.queryForm.gmtEndTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    onFinishEndTimeChange: function(e) {
      this.queryForm.finishEndTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    downCallbcak() {
      this.$nextTick(() => {
        this.queryForm.pageNum = 1;
        this.orderList = [];
        this.mescroll && this.mescroll.resetUpScroll(true);
      });
    },
    upCallback() {
      this.init();
    },
    search() {
      this.queryForm.pageNum = 1;
      this.orderList = [];
      this.show = false;
      this.init();
    },
    reset() {
      this.queryForm = {
        orderNum: '',
        carNum: '',
        orderType: '',
        orderState: '',
      };
    },
    init() {
      this.queryForm.agentId = this.agentId ;
      this.queryForm.partnerId = this.partnerId ;
      this.queryForm.memberId = this.memberId ;
      this.queryForm.driverId = this.driverId ;
      this.queryForm.stationId = this.stationId ;
      this.$clApi.haoleiAgentApi
        .fetchOrderList({
          data: this.queryForm,
        })
        .then(res => {
          if (res.code === 200) {
            this.queryForm.pageNum++;
            this.orderList = this.orderList.concat(res.rows);
            this.total = res.total;
            let pageSize =
              res.total % this.queryForm.pageSize == 0
                ? res.total / this.queryForm.pageSize
                : Math.ceil(res.total / this.queryForm.pageSize);
            this.mescroll.endSuccess(res.rows.length, pageSize >= this.queryForm.pageNum);
          } else {
            this.mescroll.endErr();
          }
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollAllWrap {
  /*height: calc(100vh - 100rpx);*/
  overflow-y: hidden;
  height: 100vh;
  background-color: #2a3a52;

  .bottom {
    width: 100%;
    text-align: center;
    height: 100rpx;
    color: #ee9a49;
    line-height: 100rpx;
    /*padding-top: 20rpx;*/
    position: fixed;
    bottom: 0;
    background-color: #2a3a52;
    z-index: 1;
    display: flex;
    .bottom_text {
      flex: 1;
      .search {
        padding: 20rpx;
      }
    }
    .sub {
      flex: 1;
      text-align: center;
      text-align: left;
    }
  }
  /*搜索框样式*/
  .search-popup {
    .input {
      padding-left: 10rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;

      .placeholder {
        color: #f6f7f9;
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }
    }
    .search-warp {
      display: flex;
      width: 96%;
      margin: 20rpx auto;
      .search-warp-btn {
        width: 96%;
        height: 58rpx;
        line-height: 58rpx;
        border: 1rpx red solid;
        border-radius: 12rpx;
        margin: 20rpx auto;
        text-align: center;
        flex: 1;
        .search {
          margin-left: 20rpx;
        }
      }
      .left {
        margin-right: 5rpx;
        flex: 1;
      }
      .right {
        margin-left: 5rpx;
        flex: 1;
      }
    }
    .close-btn {
      width: 96%;
      height: 58rpx;
      line-height: 58rpx;
      border: 1rpx red solid;
      border-radius: 12rpx;
      margin: 20rpx auto;
      text-align: center;
    }
  }
}
</style>
